<!-- pages/login/index.vue -->
<template>
    <view class="login-container">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <view class="title">听风试题</view>
      <view class="subtitle">登录后开启学习之旅</view>
      
      <wx-login-button
        class="login-btn"
        @success="onLoginSuccess"
        @fail="onLoginFail"
      />
    </view>
  </template>
  
  <script>
  import WxLoginButton from '@/components/WxLoginButton.vue'
  
  export default {
    components: {
      WxLoginButton
    },
    methods: {
      onLoginSuccess(res) {
        // 登录成功，跳转到首页
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      onLoginFail(err) {
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
  .login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120rpx 48rpx;
    background: #f8f9fa;
    
    .logo {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 32rpx;
    }
    
    .title {
      font-size: 48rpx;
      font-weight: bold;
      color: #283b66;
      margin-bottom: 16rpx;
    }
    
    .subtitle {
      font-size: 28rpx;
      color: #8a98b3;
      margin-bottom: 80rpx;
    }
    
    .login-btn {
      width: 100%;
    }
  }
  </style>